<template>
  <div class="welcome">
    <div class="welcome-body">
      <van-image width="100%" :src="welcomeInfo" />
    </div>
    <div class="welcome-btn">
      <van-button round block type="primary" @click="signUp" class="btn btn-orange">Sign up</van-button>
      <van-button round block type="primary" @click="signIn" class="btn">Sign in</van-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import WelcomeInfo from '../assets/img/welcome-guide-01.png'
const router = useRouter()
const welcomeInfo = WelcomeInfo
const signUp = (() => {
  router.push({
    name: 'Register'
  })
})
const signIn = (() => {
  router.push({
    name: 'Login'
  })
})
</script>
<style scoped>
.welcome {
  padding: 0 5vw;
}
.welcome-btn {
  padding-top: 20px;
}
.welcome-btn .btn{
  width: 100%;
  border: #FF5E00 1px solid;
  background: #FFF;
  color: #FF5E00;
  font-size: 1em;
  font-weight: bold;
  margin: 10px 0;
}
.welcome-btn .btn-orange {
  background: #FF5E00;
  color: #FFF;
}
</style>
